<template>
    <div class="upFileCss">
        <div v-if="booleans">
            <el-row style="height: 60px; line-height: 60px; border-bottom: 1px solid #ccc;margin-bottom: 20px;">
                <el-col :span="12">
                    <div style="font-size: 20px;color: #000;font-weight: bold;">管理员列表</div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-button style="float: right;" type="primary" @click="addAdmin()">+添加</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="adminList" :border="true">
                <el-table-column label="序号" type="index" sortable></el-table-column>
                <el-table-column label="姓名" prop="displayname"></el-table-column>
                <el-table-column label="账号" prop="account"></el-table-column>
                <el-table-column label="组织单位" prop="orgname"></el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column label="邮件"></el-table-column>
                <el-table-column label="状态"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editAdmin(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" @click="detailAdmin(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="tabFooter">
                <div class="block pageTab">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 25, 50, 100]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total=total>
                    </el-pagination>
                </div>
            </div>
        </div>
        <div v-else>
            <el-row style="height: 60px; line-height: 60px; border-bottom: 1px solid #ccc;margin-bottom: 20px;">
                <el-col :span="12">
                    <div style="font-size: 20px;color: #000;font-weight: bold;">管理员信息</div>
                </el-col>
            </el-row>
            <el-form :model="user" :rules="rules" ref="userForm">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="姓名" label-width="200px" prop="displayname">
                                <el-input class="inputForm" style="width: 350px" v-model="user.displayname"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="用户姓名" label-width="200px" prop="account">
                                <el-input class="inputForm" style="width: 350px" v-model="user.account"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="身份证号" label-width="200px" prop="sid">
                                <el-input class="inputForm" style="width: 350px" v-model="user.sid"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="性别" label-width="200px" prop="sex">
                                <el-select v-model="user.sex" placeholder="请选择" style="width: 350px"
                                           :disabled="operation1">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="组织" label-width="200px">
                                <el-select v-model="user.orgid" placeholder="请选择" style="width: 350px"
                                           :disabled="operation1">
                                    <el-option
                                            v-for="item in orgs"
                                            :key="item.orgid"
                                            :label="item.orgname"
                                            :value="item.orgid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="角色分类" label-width="200px">
                                <el-select v-model="user.roleid" placeholder="请选择" style="width: 350px"
                                           :disabled="operation1">
                                    <el-option
                                            v-for="item in roles"
                                            :key="item.roleid"
                                            :label="item.label"
                                            :value="item.roleid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="注册时间" label-width="200px">
                                <el-date-picker :disabled="operation1"
                                                v-model="user.tegtime_x"
                                                type="date"
                                                placeholder="选择日期"
                                                style="width: 350px">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="描述" label-width="200px">
                                <el-input class="inputForm" style="width: 350px" v-model="user.description"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="CA等级" label-width="200px">
                                <el-input class="inputForm" style="width: 350px" v-model="user.cacert"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="邮件" label-width="200px">
                                <el-input class="inputForm" style="width: 350px" v-model="user.email"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="手机号" label-width="200px" prop="phone">
                                <el-input class="inputForm" style="width: 350px" v-model="user.phone"
                                          :disabled="operation1"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light e-height">
                            <el-form-item label="状态" label-width="200px">
                                <el-select v-model="user.status" placeholder="请选择" style="width: 350px"
                                           :disabled="operation1">
                                    <el-option
                                            v-for="item in state"
                                            :key="item.status"
                                            :label="item.label"
                                            :value="item.status">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <p class="p-title">系统管理权限</p>
                <el-row>
                    <el-col :offset="2">
                        <el-checkbox-group v-model="user.funcids">
                            <el-checkbox label="1">单位管理</el-checkbox>
                            <el-checkbox label="2">用户管理</el-checkbox>
                            <el-checkbox label="3">个人信息</el-checkbox>
                            <el-checkbox label="4">审计信息</el-checkbox>
                            <el-checkbox label="5">角色管理</el-checkbox>
                            <el-checkbox label="6">权限管理</el-checkbox>
                            <el-checkbox label="7">系统设置</el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </el-form>
            <el-footer class="el_foot">
                <el-button type="primary" @click="back()">取消</el-button>
                <el-button type="primary" style="margin-left: 30px;" @click="saveAdmin('userForm')">保存</el-button>
            </el-footer>
        </div>
    </div>
</template>

<script>
    import {http} from '../../../assets/commonjs/axios';
    import {$aos} from '../../../store/state';

    export default {
        data() {
            return {
                AllList: [],
                currentPage4: 0,
                operation1: false,
                state: [
                    {status: 0, label: '无效'},
                    {status: 1, label: '有效'},
                    {status: 2, label: '初始化'},
                ],
                //['超级管理员','组织机构管理员','企业法人','专业/部门负责人','普通用户','政府部门管理员','项目负责人'],
                roles: [//roleid
                    {roleid: 0, label: '超级管理员'},
                    {roleid: 1, label: '组织机构管理员'},
                    {roleid: 2, label: '企业法人'},
                    {roleid: 3, label: '专业/部门负责人'},
                    {roleid: 4, label: '普通用户'},
                    {roleid: 5, label: '政府部门管理员'},
                    {roleid: 6, label: '项目负责人'},
                ],//角色分类
                orgs: [],//组织
                user: {
                    displayname: '',
                    account: '',
                    sid: '',
                    sex: '',
                    tegtime_x: '',
                    description: '',
                    cacert: '',
                    email: '',
                    phone: '',
                    orgid: null,//组织id
                    roleid: null,//角色分类id
                    status: null,//状态
                    funcids: [],//权限
                },
                booleans: true,
                adminList: [],
                rules: {},
                total: 0
            }
        },
        created() {
            $aos.getItem('token').then(res => {
                this.token = res;
                this.GetAdminList();
            });
        },
        methods: {
            back() {
                this.booleans = true;
            },
            //查看管理员信息
            detailAdmin(row) {
                this.operation1 = true;
                this.booleans = false;
                let uid = row.uid.toString();
                http('post', 'SystemManager/GetAdminUser', {
                    token: this.token,
                    userId: uid,
                    org: '0'
                }).then(response => {
                    let res = response.data;
                    if (res.code == 100) {
                        let orgs = res.AdminUser.orgs;
                        this.orgs = orgs;
                        this.user = res.AdminUser
                    }
                })
            },
            //编辑管理员信息
            editAdmin(row) {
                let uid = row.uid.toString();
                this.operation1 = false;
                this.booleans = false;
                http('post', 'SystemManager/GetAdminUser', {
                    token: this.token,
                    userId: uid,
                    org: '0'
                }).then(response => {
                    let res = response.data;
                    if (res.code == 100) {
                        let orgs = res.AdminUser.orgs;
                        this.orgs = orgs;
                        this.user = res.AdminUser
                    }
                })
            },
            //保存管理员信息
            saveAdmin(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.user.funcids = this.user.funcids.toString();
                        http('post', 'SystemManager/AddNewAdmin', {
                            token: this.token,
                            user: this.user,
                        }).then(response => {
                            let res = response.data;
                            if (res.code == 100) {
                                this.$notify({
                                    title: '提交成功',
                                    message: '数据已经提交',
                                    type: 'success'
                                });
                            }
                        });
                    }
                });
            },
            handleSizeChange(val) {
                this.pages = val;
            },
            // 点击页码
            handleCurrentChange(val) {
                this.adminList = this.AllList.slice((val - 1) * 10, val * 10)
            },
            GetAdminList() {
                http('post', 'SystemManager/GetAdminList', {
                    token: this.token
                }).then(response => {
                    let res = response.data;
                    if (res.code === 100) {
                        // AdminList.sort(function (a, b) { return new Date(a.time).getTime() - new Date(b.time).getTime() })
                        this.AllList = res.list;
                        this.total = res.list.length;
                        this.adminList = res.list.slice(0, 10);
                    }
                })
            },
            addAdmin() {
                this.booleans = false;
                this.GetAdminUser();
            },
            //得到管理员信息组织下拉
            GetAdminUser() {
                http('post', 'SystemManager/GetAdminUser', {
                    token: this.token,
                    userId: '0',
                    org: '0'
                }).then(response => {
                    let res = response.data;
                    if (res.code == 100) {
                        let orgs = res.AdminUser.orgs;
                        this.orgs = orgs;
                        this.user = res.AdminUser
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .tabFooter {
        width: 100%;
        height: 40px;
        padding: 10px;
    }

    .pageTab {
        min-width: 300px;
        max-width: 700px;
        float: right;
        margin-right: 20px;
    }

    .upFileCss {
        margin-bottom: 50px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 0 3px #ccc;
    }

    .p-title {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bolder;
        padding-left: 100px;
        box-sizing: border-box;
    }

    .el_foot {
        width: 40%;
        text-align: center;
        margin: 40px auto;
    }
</style>
